<!--根据这个页单独设置样式-->
<style>
    .table-responsive{overflow-x: inherit}
    td{ vertical-align: middle!important;}
    .pagination{ margin:0!important;}
    .flot{float: left}
    .rlot{float: right}
</style>
<script type="text/ng-template" id="itemModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">订单详情</h3>
    </div>
    <div class="modal-body">
        <div class="form-horizontal row">
            <div class="col-sm-12">
                <div class="row">
                    <label class="col-sm-2  control-label">id: </label>
                    <div class="col-sm-10 " style="padding-top: 6px;">{{data.base.id}}</div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <label class="col-sm-2  control-label">总价格: </label>
                    <div class="col-sm-10" style="padding-top: 6px;">¥ {{data.base.total_paid|currency : '$'}}</div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <label class="col-sm-2  control-label">名称/价格: </label>
                    <div class="col-sm-10">
                        <table class="pull-left table-bordered	tablelist">
                            <tr ng-repeat="item in data.order_product">
                                <td width="50%">{{item.name}}</td>
                                <td width="30%">{{item.attr_value_name}}</td>
<<<<<<< HEAD
<<<<<<< HEAD
                                <td width="20%" class="text-center">¥ {{item.pricecurrency : '￥'}}</td>
=======
                                <td width="20%" class="text-center">¥ {{item.price|currency : '￥'}}</td>
>>>>>>> 490cf0e85c070d5a58f58646b89403d99eafcce8
=======
                                <td width="20%" class="text-center">¥ {{item.price|currency : '$'}}</td>
>>>>>>> 2eb4ad944c9247e63762e81446aa92e016bf8279
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <label class="col-sm-2  control-label">收货地址: </label>
                    <div class="col-sm-10" style="padding-top: 6px;">
                        {{data.order_address.country}} -{{data.order_address.province}} -{{data.order_address.city}} -{{data.order_address.street}}
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <label class="col-sm-2  control-label">下单时间: </label>
                    <div class="col-sm-10" style="padding-top: 6px;">
                        {{data.base.created_at}}
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <label class="col-sm-2  control-label">结束时间: </label>
                    <div class="col-sm-10" style="padding-top: 6px;">
                        {{data.base.stop_pay_time}}
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
            </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-sm btn-default" ng-click="cancel()">Cancel</button>
    </div>
</script>

<div>
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h3">订单列表</h1>
    </div>
    <div class="padder-md m-b-none m-t" style="padding-top: 0">
        <div class="panel panel-default">
            <div class="panel-heading">订单列表</div>
            <div class="m-sm">
                <div class="clearfix">
                    <h5>搜索订单筛选项：</h5>
                    <div class="row wrapper" style="padding-bottom:0;">
                        <div class="col-sm-3 col-md-2 col-lg-2">
                            <input class="form-control ng-pristine ng-untouched ng-valid"
                                   ng-model="ctrl.vm.search.id" type="text" placeholder="订单id" >
                        </div>
                        <div class="col-sm-3 col-md-2 col-lg-2">
                            <select class="form-control" ng-model="ctrl.vm.search.state">
                                <option value="">订单状态</option>
                                <option value="1">新订单</option>
                                <option value="2">已支付</option>
                                <option value="3">已发货</option>
                                <option value="4">已收货</option>
                                <option value="-1">用户取消</option>
                                <option value="-2">系统取消</option>

                            </select>
                        </div>
                        <div class="col-sm-3 col-md-2 col-lg-2">
                            <p class="input-group">
                                <input type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.vm.search.startTime"
                                       is-open="popup.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close"
                                       placeholder="开始时间" ng-change="ctrl.vm.changeTimeS()"/>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"
                                            ng-click="open()"><i class="glyphicon glyphicon-calendar"></i>
                                    </button>
                                </span>
                            </p>
                        </div>
                        <div class="col-sm-3 col-md-2 col-lg-2">
                            <p class="input-group">
                                <input type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.vm.search.endTime"
                                       is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close"
                                       placeholder="结束时间" ng-change="ctrl.vm.changeTimeE()"/>
                                <span class="input-group-btn">
                                        <button type="button" class="btn btn-default"
                                                ng-click="open1()"><i
                                                class="glyphicon glyphicon-calendar"></i>
                                        </button>
                                    </span>
                            </p>
                        </div>
                        <div class="col-sm-3 col-md-2 col-lg-2">
                            <div>
                                <button class="btn btn-sm btn-default" type="button" ng-click="ctrl.vm.searchFn()">搜索</button>
                                <button class="btn btn-sm btn-dark" type="button" ng-click="ctrl.vm.reset()">重置</button>
                            </div>
                        </div>
                        <!--<div class="col-sm-3 col-md-2 col-lg-2">
                            <p class="input-group">
                                <span style="display: inline-block;float:left;padding-top: 5px;">是否显示图片 </span>
                                <label class="i-switch m-t-xs m-r">
                                    <input type="checkbox" ng-click="ctrl.vm.changeImg()" ng-model="ctrl.vm.data.checkedImg" >
                                    <i></i>
                                </label>
                            </p>
                        </div>-->
                    </div>
                   <!-- <div style="width: 100%" class="pull-right text-right">
                        <div>
                            <button class="btn btn-sm btn-default" type="button" ng-click="ctrl.vm.searchFn()">搜索</button>
                            <button class="btn btn-sm btn-dark" type="button" ng-click="ctrl.vm.reset()">重置</button>
                        </div>
                    </div>-->
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped b-t b-light">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>用户id</th>
                        <th width="25%">订单地址</th>
                        <th >订单商品</th>
                        <th>订单金额</th>
                        <th>下单时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="data in ctrl.vm.data" style="width: 100%">
                        <td style="width: 7%">{{data.base.id}}</td>
                        <td style="width: 7%">{{data.base.u_id}}</td>
                        <td>
                            <div>{{data.order_address.country}}-{{data.order_address.province}}-{{data.order_address.city}}</div>
                            <div>{{data.order_address.street}}{{data.order_address.postcode}}</div>
                            <div>{{data.order_address.name}}{{data.order_address.tel}}</div>
                        </td>
                        <td style="width: 30%">
                            <div style="float: left;width: 100%">
                                <div style="width: 20%;margin: 4px;float: left" >
                                    <img ng-if="data.order_product.length>=1" ng-src="{{data.order_product[0].images[0].url | imgwhq:120:240:90}}" alt="">
                                </div>
                                <div style="width: 20%;margin: 4px;float: left" >
                                    <img ng-if="data.order_product.length>=2"  ng-src="{{data.order_product[1].images[0].url | imgwhq:120:240:90}}" alt="">
                                </div>
                                <div style="width: 20%;margin: 4px;float: left" >
                                    <img ng-if="data.order_product.length>=3" ng-src="{{data.order_product[2].images[0].url | imgwhq:120:240:90}}" alt="">
                                </div>
                                <div style="width: 20%;margin: 4px;float: left" >
                                    <img ng-if="data.order_product.length>=4" ng-src="{{data.order_product[3].images[0].url | imgwhq:120:240:90}}" alt="">
                                </div>
                            </div>
                        </td>
                        <td style="width: 10%">{{data.base.total_paid|currency : '$'}}</td>
                        <td>{{data.base.created_at}}</td>
                        <td>
                            <span class="label bg-info" ng-if="data.base.status==1">新订单</span>
                            <span class="label bg-success" ng-if="data.base.status==2">已支付</span>
                            <span class="label bg-info" ng-if="data.base.status==3">已发货</span>
                            <span class="label bg-success" ng-if="data.base.status==4">已收货</span>
                            <span class="label bg-dark" ng-if="data.base.status==-1">用户取消</span>
                            <span class="label bg-danger" ng-if="data.base.status==-2">系统取消</span>
                        </td>

                        <td>
                           <button class="btn btn-sm btn-info" ui-sref="app.order.orderDetail({ id: data.base.id })">详情</button>
                        </td>
                    </tr>
                    <tr ng-if="!ctrl.vm.data.length">
                        <td colspan="12" class="text-center">暂无数据！</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <footer class="panel-footer">
                <div class="row">
                    <div class="col-sm-2 hidden-xs">
                        <select
                                class="input-sm form-control w-sm inline v-middle"
                                ng-model="placement.selected"
                                ng-options="o as o for o in placement.options"
                                ng-change="placement.changeFn()"
                        >
                        </select>
                        <i style="float: right;padding: 2% 15% 0 0">总计{{vm.page.total}}</i>
                    </div>
                    <div class="col-sm-10 text-right text-center-xs">
                        <div class="pagination pagination-sm m-t-none m-b-none">
                            <uib-pagination
                                    boundary-links="true"
                                    total-items="vm.page.total"
                                    max-size="placement.pageSize"
                                    items-per-page="placement.selected"
                                    ng-model="vm.page.current_page"
                                    ng-change="pageChanged()"
                                    class="pagination-sm"
                                    previous-text="&lsaquo;"
                                    next-text="&rsaquo;"
                                    first-text="&laquo;"
                                    last-text="&raquo;"
                            >
                            </uib-pagination>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>